<template>
  <div>
   <h1>购物车</h1>
  <span>
    <p>牛奶--{{mike}}元--数量{{mikecount}}</p>
    <button @click="increment1">Increment</button>
    <button @click="decrement1">Decrement</button>
  </span>
  <span>
    <p>早餐奶--{{zcmike}}元--数量{{zcmikecount}}</p>
    <button @click="increment2">Increment</button>
    <button @click="decrement2">Decrement</button>
  </span>
  <span>
    <p>面包--{{broad}}元--数量{{broadcount}}</p>
    <button @click="increment3">Increment</button>
    <button @click="decrement3">Decrement</button>
  </span>
  <span>
  <h2>总价: {{ gettotalprice }}</h2>
  <!-- <button @click="totalprice">count--totalprice</button>    -->
  </span>
    
    <!-- <h2>Count: {{ this.$store.state.count }}</h2>-->
    <!-- <h2>总价: {{ getCount }}</h2>  -->

    <!-- <button @click="incrementAsync">Increment Async</button>
    <button @click="decrementAsync">Decrement Async</button> -->
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
  computed: {
    ...mapState(["mikecount"]), // 将 count 映射为计算属性
     ...mapState(["mike"]), 
     ...mapState(["zcmikecount"]),
      ...mapState(["zcmike"]), 
      ...mapState(["broadcount"]),
      ...mapState(["broad"]), 
      //  ...mapState(["totalprice"]), 
    ...mapGetters(["gettotalprice"]), // 将 getCount 映射为计算属性
  },

  methods: {
    ...mapMutations(["increment", "decrement"]), // 将 increment 和 decrement 映射为方法
    ...mapActions(["incrementAsync", "decrementAsync"]), // 将 incrementAsync 和 decrementAsync 映射为方法

    // totalprice() {
    //   this.$store.commit('totalprice'); // 调用 mutation 的 totalprice 方法
    // },
  
    increment1() {
      this.$store.commit('increment1'); // 调用 mutation 的 increment 方法
    },
     increment2() {
      this.$store.commit('increment2'); // 调用 mutation 的 increment 方法
    },
     increment3() {
      this.$store.commit('increment3'); // 调用 mutation 的 increment 方法
    },

    decrement1() {
      this.$store.commit('decrement1'); // 调用 mutation 的 decrement 方法
    },
    decrement2() {
      this.$store.commit('decrement2'); // 调用 mutation 的 decrement 方法
    },
    decrement3() {
      this.$store.commit('decrement3'); // 调用 mutation 的 decrement 方法
    },


    // incrementAsync() {
    //   this.$store.dispatch('incrementAsync'); // 调用 action 的 incrementAsync 方法
    // },
    // decrementAsync() {
    //   this.$store.dispatch('decrementAsync'); // 调用 action 的 decrementAsync 方法
    // },
  },
};
</script>